<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<!-- 用 canvas 让图片绕自己转 -->
		<style>
			canvas {
				border: 1px solid #000;
 				border-radius: 50%;
 			}
 		</style>
	</head>
	<body>
 			<img src="http://n.sinaimg.cn/sinacn/20170822/6fd8-fykcypq3405231.jpg" alt="" style="display: none;"/>
 			<canvas width="400px" height="400px"></canvas>
			<script>
  			const canvas = document.querySelector('canvas')
  			var res = canvas.getContext('2d');
 				var img = document.querySelector('img')
 				var obj = {
 					x: 0,
 					y: 0,
 					width: 400,
 					height: 400
 				}
 				setInterval(function() {
 					// 清空矩形内的像素
 					// res.clearRect(0, 0, 400, 400)
 					// 画布的中心位置
 					res.translate((obj.x + (obj.width / 2)), (obj.y + (obj.height / 2)))
 					// 旋转
 					res.rotate(Math.PI / 180);
 					// 再回到起始位置
 					res.translate(-(obj.x + (obj.width / 2)), -(obj.y + (obj.height / 2)))
 					// dranwImage() 向画布上绘制图像、画布或视频
 					res.drawImage(img, 0, 0, 400, 400);
 				}, 10)
			</script>
	</body>
</html>